<!DOCTYPE html>
<html>
<head>
	<title>4-5 非父子组件间的传值</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<div id='root'>
		<!-- 
			以下两个组件是兄弟组件,非父子组件,需求就是实现它两相互传值:
			  点击 Yao 下面的内容替换成 Yao,同理点击Ming将上面的替换成Ming
		 -->
		<child neirong="Yao"></child>
		<child neirong="Ming"></child>
	</div>

	<script type="text/javascript">
		Vue.prototype.abc = new Vue();

		Vue.component('child',{
			props:{
				neirong:String
			},
			data:function(){
				return {
					selfContent:this.neirong
				}
			},
			template:"<div v-on:click='clickTest'>{{selfContent}}</div>",
			methods:{
				clickTest:function(){
					this.abc.$emit('change',this.selfContent)
				}
			},
			//用钩子监听 abc 的改变
			mounted:function(){
				var that = this
				this.abc.$on('change',function(content){
					that.selfContent = content
				})
			}
		})
		var vm = new Vue({
			el:'#root',
		})
	</script>
</body>
</html>